<template>
  <div id="index">
    <header>
      <section class="head">
        <div class="h-input">
          <span class="h-span"></span>
          <img src="../../static/img/主页语音.jpg" alt="" class="h-img" />
          <input type="text" name="color"  placeholder="热门电影：蓝精灵： 寻找神秘树">
          <img src="../../static/img/主页搜索.jpg" alt="" class="h-img">
          <span class="h-span-2"></span>
        </div>
        <div style="width: 2%;"></div>
        <div class="h-right">
          <a href="#" class="r-a"><img src="../../static/img/主页联系人.jpg" alt=""></a>
          <a href="#" class="r-a"><img src="../../static/img/主页添加.jpg" alt=""></a>
        </div>
      </section>
      <section id="payment">
        <div class="RichScan" v-for="item in ment">
          <router-link v-bind:to="item.ent"><img v-bind:src="item.url" alt=""></router-link>
          <span>{{item.text}}</span>
        </div>
      </section>
    </header>
    <main>
      <section class="sec-info">
        <ul class="info-ul">
          <li v-for="item in men">
            <router-link v-bind:to="item.emt"><img v-bind:src="item.url" alt=""></router-link>
            <span>{{item.text}}</span>
          </li>
        </ul>
      </section>
      <section class="th-info">
        <div class="th-div">
          <span class="f-span"></span>
          <ul class="d-ul">
            <li><i></i><a href="#">支付助手：￥80.00 收到一笔... </a> <span>30分钟前</span></li>
            <li><i></i><a href="#">你有一个新的快递信息 </a> <span>30分钟前</span></li>
          </ul>
          <span class="s-span"> > </span>
        </div>
      </section>
      <section>
        <div class="layui-carousel" id="test1">
          <div carousel-item >
            <div class="i-p">
              <p>玩乐最强<a>用券攻略</a></p>
              <p>每周最高领50元券</p>
            </div>
            <div class="i-p">
              <p>玩乐最强<a>用券攻略</a></p>
              <p>每月最高领10000元券</p>
            </div>
          </div>
        </div>
      </section>
      <section class="s-f">
        <div class="service" v-for="info in content">
          <div class="ser_title">
            <span></span>{{info.text1}}
          </div>
          <div class="ser_info one">
            <div class="ser_info_left">
              <p>{{info.text2}}</p>
              <p>{{info.text3}}</p>
            </div>
            <div class="ser_info_right"><span></span></div>
          </div>
          <div class="ser_info">
            <div class="ser_info_left">
              <p>{{info.text4}}</p>
              <p>{{info.text5}}</p>
            </div>
            <div class="ser_info_right"><span></span></div>
          </div>
        </div>
        <div class="buying">
          <div class="buying_title">
            <span>淘抢购</span>整点抢购
          </div>
          <div class="buying_info">
            <div class="b_info_left">
              <p>领取60元无门槛券</p>
              <p>专属优惠  整点抢半价</p>
              <p><span>立即领取</span></p>
            </div>
            <div class="b_info_img">
              <img src="../../static/img/voucher_center/voucher_center_63.jpg" alt="">
            </div>
          </div>
        </div>
        <div class="underline">
          <span></span>我是有底线的<span></span>
        </div>
      </section>
    </main>
    <app-footer></app-footer>
  </div><!-- /header -->

</template>

<script>
  import Footer from './Footer'

    export default {
      name: "index",
      //props:["index"]
      props: {
        ment: {
          type: Array,
          required: true
        }
        },
        data() {
          return {

            "men": [
              {
                "emt":"/Transfer",
                "url": "../../static/img/1/voucher_center/voucher_center_39.jpg",
                "text": "转账"
              },
              {
                "emt":"/More",
                "url": "../../static/img/1/voucher_center/voucher_center_36.jpg",
                "text": "信用卡还款"
              },
              {
                "emt":"/More",
                "url": "../../static/img/1/voucher_center/voucher_center_30.jpg",
                "text": "充值中心"
              },
              {
                "emt":"/More",
                "url": "../../static/img/1/voucher_center/voucher_center_33.jpg",
                "text": "余额宝"
              },
              {
                "emt":"/More",
                "url": "../../static/img/1/voucher_center/voucher_center_47.jpg",
                "text": "淘票票"
              },
              {
                "emt":"/More",
                "url": "../../static/img/1/voucher_center/voucher_center_48.jpg",
                "text": "滴滴出行"
              },
              {
                "emt":"/More",
                "url": "../../static/img/1/voucher_center/voucher_center_45.jpg",
                "text": "生活缴费"
              },
              {
                "emt":"/More",
                "url": "../../static/img/1/voucher_center/voucher_center_46.jpg",
                "text": "芝麻信用"
              },
              {
                "emt":"/More",
                "url": "../../static/img/1/voucher_center/voucher_center_56.jpg",
                "text": "火车票机票"
              },
              {
                "emt":"/More",
                "url": "../../static/img/1/voucher_center/voucher_center_58.jpg",
                "text": "记事本"
              },
              {
                "emt":"/More",
                "url": "../../static/img/1/voucher_center/voucher_center_57.jpg",
                "text": "蚂蚁花呗"
              },
              {
                "emt":"/More",
                "url": "../../static/img/1/voucher_center/voucher_center_54.jpg",
                "text": "更多"
              }
            ],
            content:[
              {
                text1:"惠支付",
                text2:"51元兑换券",
                text3:"汉堡王",
                text4:"我的奖励金",
                text5:"立即查看"
              },{
                text1:"生活服务",
                text2:"手机拍证件照",
                text3:"原来可以so easy!",
                text4:"开学领“红包”",
                text5:"人人有份你有了吗"
              }
            ]
          }
        },
        mounted() {
          layui.use('carousel', function () {
            var carousel = layui.carousel;
            //建造实例
            carousel.render({
              elem: '#test1'
              , width: '100%' //设置容器宽度
              , height: '6rem'
              , arrow: 'none' //始终显示箭头
              //,anim: 'updown' //切换动画方式
            });
          });
        },
      components:{
        "app-footer":Footer
      }
    }
</script>

<style scoped>

  @import "../../static/css/home.css";
  /*@import "../../static/css/base.css";*/
  body{
    margin: 0;
    padding: 0;
  }
  ul{
    margin: 0;
  }
  .layui-carousel-lay-anim .layui-carousel-ind ul{
    background: red !important;
    border-radius: 0 !important;
  }
  /*.s-f{*/
    /*padding-bottom: 6rem;*/
  /*}*/
  div.service{
    display: flex;
    flex-wrap: wrap;
    margin-top: 0.9rem;
    background: #fff;
  }
  div.ser_title{
    width: 100%;
    border-bottom: 1px solid #eee;
    font-size: 0.9rem;
    padding: .6rem 1rem;
  }
  div.ser_title span{
    display: inline-block;
    width: .3rem;
    height: 1.5rem;
    background: #1d8fe1;
    vertical-align: middle;
    margin-right: .5rem;
  }
  div.ser_info{
    padding: 1.5rem .4rem;
    line-height: 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 45%;
  }
  div.one{
    border-right: 1px solid #eee;
  }

  div.ser_info_left p:nth-of-type(1){
    color: #000;
    font-size: 0.8rem;
  }
  div.ser_info_left p:nth-of-type(2){
    color: #9d9d9d;
    font-size: 0.7rem;
  }
  div.ser_info_right span{
    display: inline-block;
    width: 2.5rem;
    height: 2.5rem;
    background: #fff9e3;
    border-radius: 50%;
  }
  div.ser_info:nth-of-type(3) span{
    background: #ffdf85;
  }
  div.service:nth-of-type(2) div.ser_info:nth-of-type(2) span{
    background: #d9f0ff;
  }
  div.service:nth-of-type(2) div.ser_info:nth-of-type(3) span{
    background: #ffdfd5;
  }
  div.buying{
    margin-top: 1rem;
    padding: 0.8rem;
    background: #fff;
  }
  div.buying_title{
    font-size: 1rem;
    color: #000;
  }
  div.buying_title span{
    display: inline-block;
    padding: .5rem .3rem;
    background: #91cbfb;
    border-radius: 5px;
    font-size: 1rem;
    color: #fff;
    margin-right: .6rem;
  }
  div.buying_info{
    display: flex;
    justify-content: space-around;
    align-items: center;
  }
  div.b_info_left{
    line-height: 2.5rem;
  }
  div.b_info_left p:nth-of-type(1){
    font-size: 1.1rem;
    color: #333;
    font-weight: bold;
  }
  div.b_info_left p:nth-of-type(2){
    font-size: 0.8rem;
    color: #9d9d9d;
  }
  div.b_info_left p:nth-of-type(3){
    font-size: 0.8rem;
    color: #76bff3;
  }
  div.b_info_left p:nth-of-type(3) span{
    padding: .3rem 1rem;
    background: #ecf6fe;
    border: 1px solid #b3dbf7;
    border-radius: 3px;
  }
  div.b_info_img img{
    width: 4rem;
  }
  div.underline{
    height: 5rem;
    padding: 4rem 1rem;
    color: #b4b4b5;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 1rem;
  }
  div.underline span{
    display: inline-block;
    width: 5.5rem;
    border: 1px solid #d8dcda;
  }
</style>
